<!-- 描述列表 -->
<template>
  <div>
    <header v-if="title" class="flex gap-2 mb-2 items-center">
      <img src="@/assets/images/triangle.png" style="width: 8px; height: 12px" />
      <span style="font-size: 16px; font-family: PingFang SC; font-weight: 500; color: #393940">
        {{ title }}
      </span>
    </header>
    <a-descriptions
      :style="{ height: contentHeight }"
      style="overflow-y: auto"
      bordered
      size="small"
      :column="column"
    >
      <a-descriptions-item
        v-for="(item, index) in showItemArr"
        :key="item.label"
        style="
          text-align: center;
          color: rgba(57, 57, 64, 0.7);
          width: 100px;
          font-family: PingFang SC;
          font-weight: 600;
          border: 1px solid #e2e7ed;
        "
        :style="{ 'background-color': getBackgroundColor(index) }"
        :content-style="{ color: '#393940', fontWeight: 'normal' }"
        :label="item.label"
        :span="item?.span ? item.span : 1"
      >
        <div v-if="item?.slotOpen" class="w-full h-full flex items-center justify-center">
          <!-- 添加插槽 -->
          <slot name="custom-component" :item="item"></slot>
        </div>
        <div v-else style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden">
          {{ item.value }}
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  itemArr: {
    type: Array,
    default: () => {
      return []
    }
  },
  column: {
    type: Number,
    default: 2
  },
  title: {
    type: String,
    default: ''
  },
  interval: {
    type: Boolean,
    default: false
  },
  contentHeight: {
    type: String,
    default: ''
  }
})

const showItemArr = computed(() => {
  return props.itemArr
})
const getBackgroundColor = (index) => {
  const num = 2 * props.column
  if (!props.interval) {
    return '#ffffff'
  }
  if (index % num < props.column) {
    return '#ffffff'
  }
  return '#E8F0FA'
}
</script>

<style lang="less" scoped></style>
